<template>
	<!-- 分类 -->
	<view class="assort">
		<!-- 左侧导航栏 -->
		<view class="assort-left">
			<leftGroup :clableList="assorBarArr" @handleGoods="handleChildEvent"></leftGroup>
		</view>
		<!-- 右侧商品页 -->
		<view class="assort-right" :style="'height:'+assortHeight+'rpx;'">
			<goods style="width: 100%;" :goodsList="goodsList" cleaType="assort"></goods>
		</view>
	</view>
</template>

<script>
	import goods from "@/component/hot.vue"
	import leftGroup from "@/component/leftGroup.vue" //左侧导航栏组件
	import $http from "@/component/commen/api/request.js";//引入封装的请求 
	export default {
		components:{
			goods,leftGroup
		},
		data() {
			return {
				assortHeight:0,//屏幕高度
				assorBarArr:[],///左侧列表
				nowIndex:0,//选中的索引
				scrollIntoIndex:"index0",//顶栏跟随的索引id
				goodsList:[],//商品列表
				orderItem:"",//点击进来的对应的数据信息
				dataInfo:[],//存储左侧导航栏以及右侧商品数据
			};
		},
		onLoad(e) {
			this.assorBarArr = JSON.parse(e.cateList)
			// console.log(JSON.parse(e.orderItem))
			this.orderItem = JSON.parse(e.orderItem)
			this.nowIndex = parseInt(e.index)
			this.scrollIntoIndex = "index"+e.index
		},
		mounted() {
			this.gethotData()
			let sysInfo = uni.getSystemInfoSync()
			let scaleFactor = 750 / sysInfo.windowWidth
			this.assortHeight = sysInfo.windowHeight * scaleFactor
		},
		methods:{
			gethotData(){//获取接口数据
				// https://huishou.68699.cn/app/index.php?
				$http({
					url:"?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=goods&op=cateList&&m=wjyk_recycle&sign=252ba633f10dc4ef7742ea59624819f5",
					method:"get"
				}).then((res)=>{
					// console.log("111111111111")
					// console.log(res)
					// // this.cateList = res.cateList
					// console.log()
					this.dataInfo = res.data
					this.goodsList = res.data.find(item=>item.id == this.orderItem.id).children
				})
			},
			handleChildEvent(value){
				console.log(value)
				this.goodsList = this.dataInfo.find(item=>item.id == value.id).children
				console.log(this.goodsList)
			},
			onClick(e,data){//点击左侧导航栏列表
				// console.log(e)
				if(this.nowIndex===e){
					return;
				}
				this.nowIndex = e
				this.scrollIntoIndex = "index"+e
				// console.log("--------")
				// console.log(this.nowIndex)
				// console.log(this.scrollIntoIndex)
				//请求接口，返回右侧数据(得到返回数据后将数据保存到vuex)
				this.goodsList = this.dataInfo.find(item=>item.id == data.id).children
				console.log(this.goodsList)
			}
		},
	}
</script>

<style lang="scss" scoped>
.assort{
	display: flex;
	// 左侧导航
	.assort-left{
		width: 23%;
		// border: 1px solid #f00;
		.assort-scroll{
			font-size: 28rpx;
			text-align: center;
			box-sizing: border-box;
			// padding-top: 2vh;
			width:100%;
			height: 100%;
			.assort-text{
				// border: 1px solid #f00;
				padding: 30rpx 0;
			}
			.assortindex{
				background: #fff;
				color: #4fc3a5;
			}
		}
		
	}
	// 右侧商品列表
	.assort-right{
		width: 100%;
		// width: 77%;
		background: #fff;
		// border: 1px solid #000;
		display: flex;
		flex-wrap: wrap;
		
	}
}
</style>
